<template>
	<view class="retrieve-code-content">
		<view class="content">
			<h1>请输入验证码</h1>
			<p>验证码以发送至<span>{{form.loginName | mobileFilter}}</span></p>
		</view>
		<view class="content">
			<verification-code-style borderStyle="border-bottom:1px solid gray" borderCheckStyle="border:1px solid rgb(117, 202, 104);"
			:latticeNum="6" @getInputVerification="getInputVerification"></verification-code-style>
		</view>
		<view class="content" v-if="!show"><p>
		{{times}}秒后重新发送验证码</p></view>
		<view class="content" style="color: dodgerblue;font-size: 0.7rem"  v-if="show" @click="returnCode">重新发送</view>
	</view>
</template>

<script>
	import verificationCodeStyle from '@/components/verification-code-style2/verification-code-style2'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	import local from '@/utils/localStorage.js';
	
	export default {
		filters:{
		    mobileFilter(val){
		      let reg = /^(.{3}).*(.{4})$/
		      return val.replace(reg,'$1****$2')
		    }
		},
		data() {
			return {
				value: "",
				loginCode: "",
				showKeyboard: true,
				times: 0,
				form: {
					loginName: "",
				},
				// 验证码
				code:"",
				
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.form.loginName = option.loginName;
			this.code = option.code;
			// console.log("option.loginName:"+option.loginName);
			// console.log("option.code:"+option.code);
			this.getCode();
		},
		components: {
            verificationCodeStyle,
			uniCountdown
        },
		methods: {
			// 用户输入的值
            async getInputVerification(e) {
                if(e.length==6 && e == this.code){
					// 根据手机号查询用户登录信息,如果存在则直接登录进首页，如果不存在设置登录密码
					const res = await this.$myRequest({
						url:'/api/login/checkLoginPhone',
						method:'post',
						data:this.form,
					});
					if(res.data.code == 200){
						// 存储token
						local.set("token",res.data.token);
						// setToken(res.data.token);
						// console.log(local.get("token"))
						uni.showToast({
							icon:"none",
							title: "登陆成功"
						})
						// 跳转到首页
						uni.switchTab({
							url:'/pages/index/index',
						})
					}else if(res.data.code == 202){
						uni.showToast({
							icon:"none",
							title: res.data.msg,
						})
					}else if(res.data.code == 203){
						uni.navigateTo({
							url:'/pages/login/set_password?loginName='+this.form.loginName
						})
					}else{
						uni.showToast({
							icon:"none",
							title: "发生错误,请联系开发人员",
						})
					}
				}else if(e.length==6 && e != this.code){
					uni.showToast({
						icon:"none",
						title: "验证码错误"
					})
				}
            },
			// 倒计时
			getCode() {
				this.show = false;
				this.times = 60;
				this.timer = setInterval(()=>{
			        this.times--
			        if(this.times===0){
						this.show = true
						clearInterval(this.timer)
			        }
				},1000)
			},
			// 重新发送验证码
			async returnCode(){
				const res = await this.$myRequest({
					url:'/api/login/getPhoneCode',
					method:'post',
					data:this.form,
				});
				console.log(JSON.stringify(res.data.code));
				this.code = res.data.code;
				this.getCode();
			}
		}
	}
</script>

<style>
.retrieve-code-content{
    margin-top: 30%;
  }
  .retrieve-code-content h1{
    font-size: 1.5rem;
    letter-spacing:1px;
    color: black;
  }
  .retrieve-code-content p{
    padding: 0.5rem 0;
    font-size: 0.5rem;
    color: #999999;
    letter-spacing:1px
  }
  .retrieve-code-content span{
    color: black;
    font-size: 0.8rem;
  }
  .retrieve-code-cont{
    padding-top: 0.5rem
  }
  .retrieve-code-cont p{
    padding: 0.5rem 0;
    font-size: 0.5rem;
    letter-spacing:1px
  }
  .retrieve-code-cont span{
    color: dodgerblue;
    font-size: 0.8rem;
  }
  .content {
        width: 600rpx;
        margin: 40rpx auto;
    }
</style>
